<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: HY-XiZYJ,HY_XiZYJ,Arial,'微软雅黑',YaHei,Helvetica Neue,Helvetica,STHeiTi,sans-serif;
            background-color: #ececec;
        }
        [v-cloak] {
            display: none;
        }
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 55px;
            background-color: #464646;
            color: #fff;

        }
        .page-name {
            width: auto;
            height: 55px;
            margin: 0 0 0 20px;
            line-height: 55px;
            float: left;
            font-size: 20px;
            font-weight: 400;
        }
        .action {
            width: auto;
            height: 55px;
            margin: 0 10px 0 0;
            line-height: 55px;
            float: right;
            font-size: 16px;
            font-weight: 400;
        }
        .class-list {
            margin-top: 70px;
        }
        .class {
            width: 96%;
            height: 128px;
            box-sizing: border-box;
            margin: 20px auto 0 auto;
            color: #fff;
            padding: 10px 10px 5px 15px;
            box-shadow: 0 2px 2px rgba(0,0,0,.3);
            background-color: #526c86;
            background-image: url("{{ asset('img/13.jpg') }}");
            background-size: 100%;
        }
        .class-top {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }
        .class-name {
            width: auto;
            font-size: 20px;
            float: left;
        }
        .class-exit {
            width: auto;
            float: right;
            margin-right: 10px;
        }
        .class-bot {
            height: 30px;
            line-height: 30px;
            margin: 50px 0 0 0;
            font-size: 16px;

        }
        .class-role {
            width: auto;
            float: left;
        }
        .class-name {
            width: auto;
            float: left;

        }
        .teacher-name {
            width: auto;
            float: left;
            margin-left: 20px;
        }
        .invitation-code {
            width: auto;
            float: right;
        }
    </style>
    <title>爱尚课</title>
</head>
<body>
<div id="app" v-cloak>
    {{--顶部Header--}}
    <header class="header">
        <div class="page-name">课堂</div>
        <div class="action" @click="createClass">创建班级</div>
    </header>


    {{--班级列表--}}
    <section class="class-list">
        @foreach ($classes as $class)
            <div class="class" @click="openClass({{ $class->id }})">
                <div class="class-top">
                    <div class="class-name">{{ $class->name }}</div>
                    <div class="class-exit" @click.stop="exitClass({{ $class->id }})">Exit</div>
                </div>
                <div class="class-bot">
                    <div class="class-role">角色：老师</div>
                    <div class="teacher-name">学生：{{ $class->student_count }} 人</div>
                    <div class="invitation-code">{{ $class->invitation_code }}</div>
                </div>
            </div>
        @endforeach
    </section>

</div>

<script src="{{ asset('js/vue.dev.js') }}"></script>
<script src="{{ asset('js/axios.dev.js') }}"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: '爱尚课',
            phone: '',
            password: '',
        },
        methods: {
            openClass(class_id) {
                window.location.href = '/teacher/class/' + class_id + '/message'
            },
            createClass() {
                let className = window.prompt('请输入班级名称')

                axios({
                    method: 'post',
                    url: '/teacher/class/create',
                    timeout: 2000,
                    data: {
                        class_name: className
                    }
                })
                    .then(function (response) {
                        alert(response.data.message)
                        if (response.data.code === 200) {
                            window.location.reload()
                        }

                    })
                    .catch(function (response) {
                        console.log(response)
                    })
            }
        }

    })

</script>
</body>
</html>